<template>
  <div class="content-wrapper">
    <div class="main-title mb-40">某上市公司数据库改造案例</div>
    <div class="flex-row pl-60 pr-60 ">
      <div class="left-row flex-1 pr-20">
        <div class="section-title flex-row flex-row-center p-20 mb-20">
          <div class="text-center ml-20 mr-40 w100">
            <img src="@/assets/images/icon/ic-case01.png" alt="">
            <div class="fs-20 f-primary f-bold lh-28" >业务挑战</div>
          </div>
          <div class="fs-14 f-normal lh-28 flex-1">
            <div><span class="f-bold">客户名称：</span>某上市公司</div>
            <div><span class="f-bold">上云类型：</span>数据库改造</div>
            <div><span class="f-bold">案例概况：</span>使用分布式数据库替换单节点数据库，提升数据库性能与可扩展性。</div>
          </div>
        </div>
        <div class="section-title flex-row flex-row-center p-20 mb-20">
          <div class="text-center ml-20 mr-40 w100">
            <img src="@/assets/images/icon/ic-case02.png" alt="">
            <div class="fs-20 f-primary f-bold lh-28" >解决方案</div>
          </div>
          <div class="fs-14 f-normal lh-28 flex-1">
            <div><span class="f-bold">建设模式：</span>调研+自主实施</div>
            <div><span class="f-bold">主要工作内容：</span>SDP系统为新能源电池售后一体化数据中心系统，数据量大、实时查询要求高；系统采用单体开源Mysql数据库存在无法满足海量数据及性能要求；采用HANA商业数据库则造成巨额成本支出。解决方案：采用电信集团自研分布式数据库解决方案，利用自研分布式数据库横向扩展能力，以达到海量数据存储、读写性能高的要求。</div>
          </div>
        </div>
        <div class="box text-center">
          <div class="fs-18 f-bold f-primary mb-20">单体MySQL替换为分布式数据库</div>
          <img :src="img1">
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title"><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例成果</div>
        <div class="box h220 mt-20 mb-20">
          <div class="f-normal fs-14" style="width: 400px">
            SDP售后系统涉及分布式数据库改造，数据存储容量为 <span class="f-primary fs-24">115TB</span>，天翼云专属资源池约为
            <span class="f-primary fs-24">30台</span>设备（其中包括物理存储区、数据分析区、应用区等），改造期为
            <span class="f-primary fs-24"> 1.5个</span>月，其中平台投入专家<span class="f-primary fs-24"> 4名</span>，应用改造投入<span class="f-primary fs-24"> 2名</span>
          </div>
          <img class="bg" src='@/assets/images/case/bg-1.png' />
        </div>
        <div class="section-title "><svg-icon iconName="biaoti2" class="mr-10"></svg-icon>案例价值</div>
        <div class="box h220 mt-20  mb-20">
          <img :src="frameworkImg">
          <img class="bg" src='@/assets/images/case/bg-2.png' />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        img1:require('../../assets/images/case/pic-1.png'),
        frameworkImg: require('../../assets/images/case/text1.png')
      }
    }
  }
</script>

<style scoped lang="scss">
  .content-wrapper:after{
    content: '';
    width: 1920px;
    height: 1080px;
    position: fixed;
    top:0;
    left: 0;
    z-index: -1;
    background: url("~@/assets/images/case/bgline.png") no-repeat bottom;
    background-size: 100%;
  }
  .box{
    padding: 30px 40px;
    background: #101010;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    &.h220{
      height: 220px;
    }
    .bg{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }
  .lh-28{
    line-height: 28px!important;
  }
  .w100{
    width: 100px;
  }
</style>
